import React, { useEffect, useState } from 'react'
import { history, useIntl } from 'umi';
import '../assets/css/worship.less';
import { readTemple, useTempleWrite } from "@/utility/contract";
import { useAccount } from "wagmi";
import { EffectCoverflow, Pagination } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/autoplay';
import 'swiper/css/effect-coverflow';
import 'swiper/css/effect-fade';
import 'swiper/css/grid';
import 'swiper/css/mousewheel';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import 'swiper/css/thumbs';

import gfBanner from '../assets/image/gfBanner.jpg';
import yunbg from '../assets/image/yunbg.png';
import { NFTIMAGE, NFTImage, parseImage } from '@/utility/imageProcess';
import WalletButton from "@/components/WalletButton";
import NFTconfig from "@/config/NFTconfig";
import { zeroAddress } from "viem";
import { shuffle } from "@antfu/utils";
import NFT from "@/components/NFT";
import { IsMobile } from "@/components/IsMobile";
export default function Worship() {
    const intl = useIntl();
    const [recentDataList, setRecentDataList] = useState([]);
    const [scrollList, setScrollList] = useState<NFTIMAGE[]>([]);
    const [worshipAll, setWorshipAll] = useState<NFTIMAGE[]>([]);
    const [imgIndex, setImgIndex] = useState(0);
    const [now, setNow] = useState<number>(0);
    const { address, isConnected } = useAccount()
    const { mobile } = IsMobile();
    //对图片i取消供奉
    const redeem = useTempleWrite('redeemOne')

    useEffect(() => {
        readTemple('tokensOfOwner', { args: [zeroAddress, NFTconfig.FirstDAO_address, 1, 500] }).then((data: any) => {
            if (data === undefined || data.length === 0) return;
            let arr = data?.filter(v => v !== BigInt(0)).map(Number);
            if (arr.length === 0)
                arr = Array.from({ length: 100 }, (_, i) => i + 1);
            const s = shuffle(arr)
            console.log(s.map(NFTImage))
            setWorshipAll(s.map(NFTImage))

        })
    }, [])

    useEffect(() => {
        if (worshipAll.length === 0) return;
        // const intervalId = setInterval(() => {
        //     setNow((prevState) => (prevState + 1) % worshipAll.length)
        // }, 1000);
        const timer = setInterval(() => {
            setImgIndex(c => {
                const max = worshipAll.length - 1;
                if (c < max) {
                    return c + 1;
                } else {
                    return 0;
                }
            });
        }, 15000);
        return () => clearInterval(timer);
    }, [worshipAll])
    console.log(worshipAll, 'all')
    console.log(now)

    useEffect(() => {
        console.log('nft config', NFTconfig.FirstDAO_address)
        //获取用户自身的供奉数据
        if (isConnected)
            readTemple('tokensOfOwner', { args: [address, NFTconfig.FirstDAO_address, 1, 500] }).then((data: any) => {
                const arr = data?.filter(v => v !== BigInt(0))
                setScrollList(arr.map(NFTImage))
            })
    }, [address, isConnected]);

    const toAll = () => {
        history.push('/myNft')
    }

    const cancelFn = (id) => {
        redeem.write({ args: [NFTconfig.FirstDAO_address, id] })
    }
    return (
        <div className='worshipCon'>
            <div className='banner'>
                <img src={gfBanner} className='bannerBG' />
                {
                    worshipAll.length ?
                        <>
                            <div className='position'>
                                <div className='absolute'>
                                    {worshipAll.map((item, index) => {
                                        return (
                                            <img key={index} style={index === imgIndex ? { opacity: 1 } : { opacity: 0 }}
                                                src={parseImage(item.id)} className='people' />
                                        )
                                    })}
                                </div>
                            </div>
                            <div className='yun'><img src={yunbg} /></div>
                        </>
                        : ''
                }
            </div>
        </div>
    );
}
